<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="item in getPurchaseData" :key="item.id">
        <img
          v-lazy="item.pic"
          alt=""
        />
        <div class="num">疯抢{{item.quanJine}}万件</div>
        <div class="title">{{item.dtitle | mysub(7)}}</div>
        <div class="pic">
          <span class="money">￥{{item.jiage}}</span>
          <del>￥{{item.yuanjia}}</del>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/swiper-bundle.css";
import { getPurchase } from "@/api/detail";
export default {
  data() {
    return {
      getPurchaseData: [],
    };
  },
  async mounted() {
    let ret = await getPurchase();
    // console.log(ret);
    let rets = ret.data.goodsList;
    console.log(rets);
    this.getPurchaseData = rets;
  },
  updated() {
    this.$nextTick(() => {
      var swiper = new Swiper(".swiper-container", {
        // 一行显示几个元素
        slidesPerView: 4,
        // 元素之间的行间距
        spaceBetween: 10,
      });
    });
  },
};
</script>

<style lang="scss" scoped>
.swiper-slide {
  width: 100px;
  height: 170px;
  padding: 0 5px;
  position: relative;
  margin: 0 10px;
  border-radius: 10px;
  background: #f5f5f9;
}
img {
  width: 90px;
  height: 90px;
  margin-top: 10px;
}
.num {
  width: 80px;
  height: 20px;
  background: linear-gradient(270deg, #ffbe50, #ff570c);
  box-shadow: 0 0.04rem 0.06rem 0 rgb(255 153 67 / 33%);
  border-radius: 10px;
  text-align: center;
  line-height: 20px;
  font-size: 10px;
  color: #fff;
  position: absolute;
  top: 90px;
  left: 13px;
}
.title{
  position: absolute;
  top: 115px;
  color: #333;
}
.pic{
  position: absolute;
  top: 140px;
}
.pic .money{
  color: #fe3738;
  font-size: 16px;
  font-weight: 600;
}
.pic del{
  color: #999999;
}
</style>